{% extends "layouts/layout.html" %}
{% block title %}
New Thread
{% endblock %}
{% block content %}
<script type="text/javascript" src="/js/threads.js"></script>
<h3>New Thread</h3>
<form action="/threads/save_thread" method="post">
	<div class="well">
		<input type="hidden" name="xsrf_token" value="{{xsrf_token}}" />
		{% if item %}
		<p>
			<label>Recipient:</label>
			<b>{{ item.get_creator().get_display_name() }}</b>
			<input type="hidden" name="item_id" value="{{item.key().id()}}" />
			<p><label>Title:*</label>{{ sanitizeHTML('<input type="text" id="title" name="title" value="RE: ' + item.title + '" />') }}</p>
			{% else %}
			<p>
				<label>
					Recipients:*<i class="icon-info-sign info_button-right" title="Recipient" data-content="Use this dropdown to specify what users should recieve this message"></i>
				</label>
				<input type="text" id="recipients_token_field" />


				<div class="hide" id="recv_results"></div>
				<input type="hidden" id="recipients" name="recipients"/>
			</p>
			<p><label>Title:*</label><input type="text" id="title" name="title" value="" /></p>
			{% endif %}
			<p><label>Message:</label><textarea name="message" rows="4" cols="50"></textarea> </p>
		</div>
		<p>
			<button type="submit" value="submit" class="btn btn-primary">Post Thread</button>
			{% if item %}
			<a href="/" class="btn">Cancel</a>
			{% else %}
			<a href="/threads/" class="btn">Cancel</a>
			{% endif %}
		</p>
	</form>

	<script type="text/javascript">
    $(document).ready(function() {
      $("#recipients_token_field").tokenInput(
        [
        {{ list }}
        ],
        {
          theme:"facebook",
          onAdd: function (item) {
            var existing_val = $('#recipients').val();
            if (existing_val === "") {
              $('#recipients').val(item.id);
            }else {
              $('#recipients').val(existing_val + '||' + item.id);
            }
          }
        }
      );
    });
	</script>

	{% endblock %}

